<template>
	<view v-if="itemData.data.productList && itemData.data.productList.length > 0" class="drag optional" :style="{
      background: itemData.style.bgcolor,
      paddingLeft: itemData.style.paddingLeft * 2 + 'rpx',
      paddingRight: itemData.style.paddingLeft * 2 + 'rpx',
      paddingTop: itemData.style.paddingTop * 2 + 'rpx',
      paddingBottom: itemData.style.paddingBottom * 2 + 'rpx',
    }">
		<view class="diy-seckill" :style="{
        background: itemData.style.background,
        borderTopLeftRadius: itemData.style.topRadio * 2 + 'rpx',
        borderTopRightRadius: itemData.style.topRadio * 2 + 'rpx',
        borderBottomLeftRadius: itemData.style.bottomRadio * 2 + 'rpx',
        borderBottomRightRadius: itemData.style.bottomRadio * 2 + 'rpx',
      }">
			<view class="diy-head d-b-c" :style="{
          backgroundImage: itemData.style.bgimage
            ? 'url(' + itemData.style.bgimage + ')'
            : '',
        }">
				<view class="left d-s-c flex-1">
					<view v-if="itemData.style.titleType == 1" class="name">{{
            itemData.params.title
          }}</view>
					<image v-if="itemData.style.titleType == 2" class="titleImgt" :src="itemData.style.titleImage"
						mode="heightFix"></image>
					<view class="datetime d-s-c">
						<text class="text" :style="{ color: itemData.style.color }">|</text>
						<Countdown :backColor="itemData.style.titleColor1" :color="itemData.style.color"
							:cutColor="itemData.style.numberColor" :config="countdownConfig" activeName="noborder">
						</Countdown>
					</view>
				</view>
				<view class="right white d-c-c" style="line-height: 1; height: 100%" :style="{
            color: itemData.style.moreColor,
            fontSize: itemData.style.moreSize * 2 + 'rpx',
          }" @click="gotoList">
					{{ itemData.params.more }}
					<text class="icon iconfont icon-you" :style="{
              color: itemData.style.moreColor,
              fontSize: '22rpx',
            }"></text>
				</view>
			</view>
			<view class="product-list column__3">
				<view class="product-item" v-for="(product, index) in itemData.data.productList"
					@click="gotoDetail(product.productId)" :key="index" :style="{
            background: itemData.style.productBgColor,
            borderTopLeftRadius: itemData.style.productTopRadio * 2 + 'rpx',
            borderTopRightRadius: itemData.style.productTopRadio * 2 + 'rpx',
            borderBottomLeftRadius:
              itemData.style.productBottomRadio * 2 + 'rpx',
            borderBottomRightRadius:
              itemData.style.productBottomRadio * 2 + 'rpx',
          }">
					<!-- 两列三列 -->
					<view class="product-cover">
						<image :style="{
                borderRadius: itemData.style.productImgRadio * 2 + 'rpx',
              }" :src="product.filePath" mode="aspectFit"></image>
					</view>
					<view class="product-info d-c d-b-s flex-1">
						<view class="f28 text-ellipsis" v-if="itemData.style.productName == 1" :style="{
                color: itemData.style.productNameColor,
              }">
							{{ product.productName }}
						</view>
						<view class="d-b-c ww100" v-if="itemData.style.productSchedule == 1">
							<view class="slider-box flex-1" :style="{
                  background:
                    (itemData.style.productSliderColor || '#ffffff') + '30',
                }">
								<view :style="{
                    background: itemData.style.productSliderColor,
                    width: product.saleRate + '%',
                  }" class="slider-content"></view>
							</view>
							<view class="f24 gray9">已抢{{ product.saleRate || 0 }}%</view>
						</view>
						<view class="d-b-c ww100">
							<view class="price tc flex-1" style="text-align: left">
								<text class="f28" v-if="itemData.style.productPrice == 1" :style="{
                    color: itemData.style.productPriceColor,
                  }">
									¥{{ product.seckillPrice }}
								</text>
								<text v-if="itemData.style.productLineprice == 1" :style="{
                    color: itemData.style.productLineColor,
                  }" class="text-d-line">
									¥{{ product.productPrice }}
								</text>
							</view>
							<view :style="{
                  background: itemData.style.productLineBtnBackground,
                  borderRadius: itemData.style.productLineBtnRadius * 2 + 'rpx',
                  color: itemData.style.productLineBtnColor,
                }" class="btn text-ellipsis tc" v-if="itemData.style.productBtn == 1">
								{{ itemData.params.btntext }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Countdown from "@/components/countdown/countdown-act.vue";
	export default {
		components: {
			Countdown,
		},
		data() {
			return {
				/*倒计时配置*/
				countdownConfig: {
					/*开始时间*/
					startstamp: 0,
					/*结束时间*/
					endstamp: 0,
					/*标题*/
					title: " ",
					type: "hours",
				},
			};
		},
		props: ["itemData"],
		created() {
			this.countdownConfig.endstamp = this.itemData.data.endTime;
			this.countdownConfig.startstamp = this.itemData.data.startTime;
		},
		methods: {
			scroll(e) {},

			/*跳转列表*/
			gotoList() {
				let url = "/pagesPlus/seckill/list/list";
				this.gotoPage(url);
			},

			/*跳转产品详情*/
			gotoDetail(e) {
				let url = "/pages/product/detail/detail?productId=" + e;
				this.gotoPage(url);
			},
		},
	};
</script>

<style lang="scss">
	.titleImgt {
		width: 100%;
		height: 88rpx;
	}

	.diy-seckill {
		overflow: hidden;
	}

	.diy-seckill .diy-head {
		padding: 0 20rpx;
		height: 90rpx;
		background-size: 100% 100% !important;
	}

	.diy-seckill .diy-head .name {
		font-size: 36rpx;
		font-weight: bold;
		/* width: 100px; */
	}

	.diy-seckill .diy-head .datetime {
		margin-left: 40rpx;
		border: none;
		white-space: nowrap;

		.text {
			white-space: nowrap;
		}
	}

	.diy-seckill .diy-head .datetime>text {
		display: inline-block;
	}

	.diy-seckill .diy-head .datetime .text {
		margin: 0 6rpx;
		line-height: 1;
	}

	.diy-seckill .diy-head .datetime .hour {
		background: linear-gradient(to right, rgb(255, 255, 255), rgb(255, 255, 255));
		color: rgb(253, 59, 84);
		font-size: 24rpx;
		border-radius: 6rpx;
		padding: 4rpx;
		line-height: 1;
	}

	.diy-seckill .diy-head .datetime .box {
		padding: 4rpx;
		border-radius: 8rpx;
		background: #000000;
		color: #ffffff;
	}

	.diy-seckill .product-list {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		// box-shadow: 0px 4px 2px 0px rgba(6, 0, 1, 0.03);
		padding: 20rpx;
	}

	.diy-seckill .product-list .product-title {
		margin-top: 8rpx;
		height: 80rpx;
		line-height: 40rpx;
		display: -webkit-box;
		overflow: hidden;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.diy-seckill .display__list .column__3 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.diy-seckill .product-list.column__3 .product-item {
		/* width: 66px; */
		margin-bottom: 20rpx;
		// margin-right: 23px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		overflow: hidden;
	}

	.diy-seckill .product-list.column__3 .product-item:last-child {
		margin-bottom: 0;
	}

	.diy-seckill .product-list.column__3 .product-item .product-cover {
		width: 200rpx;
		height: 200rpx;
		overflow: hidden;
	}

	.product-info {
		height: 200rpx;
		box-sizing: border-box;
		padding-left: 20rpx;
	}

	.diy-seckill .product-list.column__3 .product-item .product-cover image {
		width: 200rpx;
		height: 200rpx;
	}

	.diy-seckill .product-list.column__3 .product-title {
		height: 40rpx;
		overflow: hidden;
	}

	.slider-box {
		height: 18rpx;
		border-radius: 18rpx;
		position: relative;
		overflow: hidden;
		margin-right: 20rpx;
		background: rgba(#ff6417, 0.1);
	}

	.slider-box .slider-content {
		position: absolute;
		left: 0;
		top: 0;
		height: 18rpx;
		background: #ff6417;
	}

	.diy-seckill .product-list.column__3 .product-item .btn {
		width: 162rpx;
		height: 58rpx;
		background: #ff6417;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>